<!-- 薪资排行 -->
<template>
	<view v-if="my == 'true'">
		<u-navbar :isBack="false" title="全国反应速度" :background="background" title-color="#fff" back-icon-color="#fff" :border-bottom="false"></u-navbar>
		<add-tip :tip="tip" :duration="duration" />
		<view class="contaier" style="background-color: #FFFFFF;">
			<view class="top_bg">
				<view class="one_box">
					<!-- 第二名 -->
					<view class="top3">
						<view class="num_two">
							<image class="huangguan2" src="@/static/rank/two.png"></image>
							<image @click="userCenter(two)" class="top3_head" :src="two.avatar"></image>
							<view class="top_name">{{two.nickName}}</view>
							<view class="top_sy">{{two.city}}·{{two.gameTime}}<span>秒</span></view>
						</view>
					</view>

					<!-- 第一名 -->
					<view class="top3">
						<view class="num_one">
							<image class="huangguan1" src="@/static/rank/one.png"></image>
							<image @click="userCenter(one)" class="top3_head" :src="one.avatar"></image>
							<view class="top_name text-bold" style="font-size: 30rpx;">{{one.nickName}}</view>
							<view class="top_sy">{{one.city}}·{{one.gameTime}}<span>秒</span></view>
						</view>
					</view>

					<!-- 第三名 -->
					<view class="top3">
						<view class="num_three">
							<image class="huangguan2" src="@/static/rank/three.png"></image>
							<image @click="userCenter(three)" class="top3_head" :src="three.avatar"></image>
							<view class="top_name">{{three.nickName}}</view>
							<view class="top_sy">{{three.city}}·{{three.gameTime}}<span>秒</span></view>
						</view>
					</view>
				</view>


				<view class="number_sy_box">
					<view class="number_sy_box_title">
						<text>反应速度·统计</text>
						<text v-if="vote.isRank" style="position: absolute; right: 20rpx;z-index: 1; font-size: 24rpx;color: #c3c3c3;">
							距离上榜差：{{vote.rankTime}}秒
						</text>
					</view>
					<view class="number_sy_main">
						<view style="width: 50%; text-align: center; border-right: 1px solid #eee;">
							<view class="number_num1">{{vote.gameTime}}秒</view>
							<view class="danwei">当前战绩</view>
						</view>
						<view style="width: 50%; text-align: center; z-index: 1;">
							<view class="number_num2">第{{vote.cityRank}}名</view>
							<view class="danwei">当前排名</view>
						</view>
					
						<image mode="widthFix" class="xiaoding_bg" src="@/static/rank/Intersect.png"></image>
					</view>
				</view>
			</view>

			<view class="rankList_box">
				<view class="rankItem" v-for="(item,index) in rankList" :key="index">
					<view class="rankIndex">
						<text>{{ index + 4 }}</text>
					</view>
					<view class="HeardBox">
						<image @click="userCenter(item)" class="rankHeard" :src="item.avatar "></image>
					</view>

					<view class="NameBox">
						<!-- <view class="userName">{{item.name}}</view> -->
						<view class="userName text-bold">{{item.nickName}}</view>
						<view class="userPost text-gray"></view>
						<view class="color_ccc">{{item.city}}</view>
					</view>
					<view class="download_box">
						<text class="text-blue">{{item.gameTime}}</text>秒
					</view>
				</view>
				<view class="footer-box">
					<view class="more-box" @click="moreBtn">查看更多</view>
					<view class="more-tip">只展示前100名 整点清空排行</view>
				</view>
			</view>
			
			<!-- <view class="left-box">
				<view class="rank-btn" @click="ranBtn">同城排名</view>
			</view> -->
			
			<view class="right-box">
				<view class="tab-btn" @click="addBtn">搭子匹配</view>
				<button class="tab-btn" open-type="share">分享</button>
			</view>
			
			<view class="btn-box">
				<view class="start-btn" @click="startBtn">开始挑战</view>
			</view>
			
			
		</view>
		
		<user-auth></user-auth>
	</view>
</template>

<script>
	import addTip from '@/components/wxcomponents/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue';
	export default {
		components: {
			addTip
		},
		data() {
			return {
				tip: '每天挑战前20名，可获得1天会员',
				duration: 1,
				background: {
					backgroundColor: '#5d8eed',
				},
				nowTime: '',
				vote: null,
				one: {
					avatar: 'http://cdn.zhoukaiwen.com/head1.jpg',
					nickName: '李白',
					gameTime: 0.001,
					online: '0',
					city: '陕西',
				},
				two: {
					avatar: 'http://cdn.zhoukaiwen.com/head2.jpg',
					nickName: '王昭君',
					gameTime: 0.002,
					online: '0',
					city: '成都',
				},
				three: {
					avatar: 'http://cdn.zhoukaiwen.com/head12.jpeg',
					nickName: '赵云',
					gameTime: 0.003,
					online: '0',
					city: '西安',
				},
				rankList: [],
				moreFlag: false,
				appName: '',
				userId: 0,
				my: 'false',
			}
		},
		onLoad(options) {
			if(options.my){
				this.my = options.my;
			}
			if(options.shareUserId){
				uni.setStorageSync("shareUserId", options.shareUserId);
			}
			var config = uni.getLaunchOptionsSync();
			if(config.scene){
				uni.setStorageSync("scene", config.scene);
			}
			this.appName = this.website.appName;
			this.userId = uni.getStorageSync("userId");
			this.getDateList();
		},
		onShareAppMessage(res) {
			return {
				title: '你有我快吗？敢不敢来「'+this.appName+'」挑战我！',
				path: '/packgeMine/pages/game/index?my=true&shareUserId='+this.userId,
			};
		},
		onShareTimeline() {
			return {
				title: '你有我快吗？敢不敢来「'+this.appName+'」挑战我！',
				path: '/packgeMine/pages/game/index?my=true&shareUserId='+this.userId,
			};
		},
		methods: {
			userCenter(item) {
				this.judgeAuth(() => {
					if(item.online == '0'){
						return;
					}
					this.$u.route({
						url: 'packgeMine/pages/center/index',
						params: {
							userId: item.userId,
						}
					});
				}); 
			},
			getDateList() {
				this.$u.get('/wq/vote/getVoteList',{
					pageNum: 1,
					appId: this.website.appId,
					userId: uni.getStorageSync("userId"),
					pageSize: 10,
				}).then(res => {
					this.vote = res.vote;
					var arr = res.dataList;
					if(arr[0]){
						this.one = arr[0];
					}
					if(arr[1]){
						this.two = arr[1];
					}
					if(arr[2]){
						this.three = arr[2];
					}
					let newArr = arr.filter(function(item,index,self) {
					    return index > 2;
					});
					this.rankList = newArr;
				});
			},
			moreBtn() {
				if(this.moreFlag){
					this.$u.toast('只展示前100名');
					return;
				}
				this.$u.get('/wq/vote/getVoteList',{
					pageNum: 2,
					appId: this.website.appId,
					userId: uni.getStorageSync("userId"),
					pageSize: 10,
				}).then(res => {
					this.moreFlag = true;
					var arr = res.dataList;
					this.rankList = this.rankList.concat(arr);
				});
			},
			ranBtn() {
				this.$u.route({
					url: 'pages/index/cityRank',
				});
			},
			startBtn() {
				this.$u.route({
					url: 'packgeMine/pages/game/index',
					params: {
						my: 'true',
					}
				});
			},
			addBtn() {
				this.$u.route({
					url: 'pages/index',
					params: {
						index: 2,
					}
				});
			},
		},
	}
</script>

<style lang="scss">
	.top_bg {
		width: 750rpx;
		height: 650rpx;
		background: url(http://cdn.zhoukaiwen.com/rank_bg.png) no-repeat;
		background-size: 750rpx;
		position: relative;
	}

	.one_box {
		width: 750rpx;
		height: 260rpx;
		position: absolute;
		left: 0;
		bottom: 110rpx;
		display: flex;
		justify-content: space-around;
	}

	.one_box .top3 {
		width: 210rpx;
		height: 280rpx;
	}

	.top_name {
		width: 100%;
		height: 55rpx;
		line-height: 60rpx;
		color: #f2f2f2;
		font-size: 26rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.top_sy {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: rgba(255, 255, 255, .7);
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.top_sy span {
		font-size: 20rpx !important;
	}

	.num_one {
		position: relative;
	}

	.huangguan1 {
		width: 60px;
		height: 60px;
		position: absolute;
		right: -10rpx;
		top: -18*2rpx;
	}

	.num_one .top3_head {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100%;
		margin: 15rpx 0 0 30rpx;
		border: 4rpx solid #ffdd3c;
	}

	.num_two {
		position: relative;
	}

	.huangguan2 {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		right: 15rpx;
	}

	.num_two .top3_head {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100%;
		margin: 45rpx 0 0 45rpx;
		border: 4rpx solid #bcdcdf;
	}

	.num_three {
		position: relative;
	}

	.huangguan2 {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		right: 15rpx;
	}

	.num_three .top3_head {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100%;
		margin: 45rpx 0 0 45rpx;
		border: 4rpx solid #e29d85;
	}

	// 第二块
	.number_sy_box {
		width: 700rpx;
		height: 210rpx;
		background-color: #FFFFFF;
		position: absolute;
		left: 25rpx;
		border-radius: 20rpx;
		bottom: -115rpx;
		padding: 22rpx;
		box-shadow: 3px 3px 15px 3px rgba(0, 0, 0, 0.1)
	}

	.number_sy_box_title {
		color: #888888;
		// font-weight: 500;
		font-size: 28rpx;
		display: flex;
		z-index: 9999;
		justify-content: space-between;
	}

	.number_sy_main {
		width: 100%;
		height: 124rpx;
		padding-top: 20rpx;
		line-height: 52rpx;
		// background: red;
		display: flex;
		justify-content: space-around;
		position: relative;
	}

	.xiaoding_bg {
		position: absolute;
		right: -22rpx;
		bottom: -30rpx;
		width: 180rpx;
	}

	.number_num1 {
		font-size: 40rpx;
		font-weight: 500;
		color: #2fc04f;
	}

	.number_num2 {
		font-size: 40rpx;
		font-weight: 500;
		color: #4bac7f;
	}

	.danwei {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		color: #c9c9c9;
	}

	// 列表
	.rankList_box {
		width: 750rpx;
		min-height: 200rpx;
		margin-top: 130rpx;
	}

	.rankItem:last-child {
		border: none;
	}

	.rankItem {
		width: 700rpx;
		height: 140rpx;
		margin: 0px auto;
		border-bottom: 1px solid #e9e9e9;
	}

	.rankIndex {
		width: 60rpx;
		height: 140rpx;
		line-height: 140rpx;
		text-align: center;
		color: #CCCCCC;
		font-size: 40rpx;
		float: left;
	}

	.HeardBox {
		width: 100rpx;
		height: 100rpx;
		margin: 20rpx;
		border-radius: 100%;
		overflow: hidden;
		float: left;
		margin-right: 25rpx;
		margin-left: 10rpx !important;
	}

	.HeardBox image {
		width: 100%;
		height: 100%;
	}

	.NameBox {
		width: 400rpx;
		height: 140rpx;
		float: left;
		padding-top: 10rpx;
		box-sizing: border-box;
	}

	.NameBox view {
		height: 50rpx;
		line-height: 70rpx;
	}

	.userName {
		width: 300rpx;
		font-size: 30rpx;
		float: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.download_box {
		width: 80rpx;
		height: 140rpx;
		// background-color: red;
		float: right;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1;
	}

	.download_box image {
		width: 45rpx;
		margin: 50rpx auto;
		display: block;
	}
	
	.footer-box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 20px 0;
		padding-bottom: 100px;
	}
	.more-box {
		color: #2979ff;
		font-size: 32rpx;
		margin-bottom: 40rpx;
		text-decoration: underline;
		letter-spacing: 4rpx;
	}
	.more-tip {
		color: #c8c9cc;
		font-size: 24rpx;
	}
	
	.btn-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.start-btn {
		width: 600rpx;
		font-size: 38rpx;
		color: #fff;
		font-weight: bolder;
		border-radius: 40px;
		background-color: #ff9900;
		letter-spacing: 30rpx;
		position: fixed;
		bottom: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		animation: btnScaleAni 3.5s infinite;
	}
	
	@keyframes btnScaleAni {
	  0%{ transform: scale(.85); }
	  50%{ transform: scale(1); }
	  100%{ transform: scale(.85); }
	}
	
	.left-box {
		position: fixed;
		left: 0;
		color: #fff;
		font-size: 14px;
		top: 200rpx;
	}
	
	.rank-btn {
		width: 24px;
		display: flex;
		text-align: center;
		background-color: #fcbd71;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		padding: 5px 0;
	}
	
	.right-box {
		position: fixed;
		right: 0;
		color: #fff;
		font-weight: bolder;
		font-size: 16px;
		bottom: 400rpx;
		z-index: 999;
	}
	
	.tab-btn {
		width: 47px;
		height: 47px;
		background-color: #ff9900;
		text-align: center;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		margin-bottom: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	button {
		padding: 0;
		margin: 0;
		line-height: normal;
		background-color: unset;
		color: #fff;
		font-weight: bolder;
		font-size: 16px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	button::after{ 
		border: none;
	}
</style>
